import React, {FC, useEffect, useRef, useState} from 'react';
import {Button, Radio, Form, Table, Input, Modal, Select, DatePicker, Cascader, message,Space} from 'antd';
import type { RadioChangeEvent } from 'antd';
import {getBuildingList} from "../../apis/building";
import FeeHouse from './FeeHouse'
import type { ColumnsType } from 'antd/es/table';
import '../../assets/css/FeeAdd.css'
import type { DatePickerProps, RangePickerProps } from 'antd/es/date-picker';
import  {getFeetypeList,getFeeAdd} from '../../apis/fee'

const { Option } = Select;
const { RangePicker } = DatePicker;

const FeeAdd:FC<any> =(props:any)=> {
    //类型
    const [feeType,setFeeType] = useState([])
    const getType =async ()=>{
        const res:any = await getFeetypeList({}).catch()
        console.log(res)
        if(res&&res.errCode===10000){
            setFeeType(res.data.list)
        }
    }

    //部分房间
    const [houseShow,setHouseShow] = useState(false)
    const onChange = (e: RadioChangeEvent) => {
        console.log('radio checked', e.target.value);
    };
    const getHouseShow = (val:any)=>{
        setHouseShow(val)
    }
    //表单提交
    const onFinish = async(values: any) => {
        console.log(houseAddId)
        const res:any = await getFeeAdd({...values,houseids:houseAddId?houseAddId.map((item:any)=>(item.id)):[],begindate:date[0],enddate:date[1],buildingid:values.buildingid[values.buildingid.length-1]})
        if(res&&res.errCode===10000){
            message.success('添加成功');
            props.getFeeClose()
        }else{
            message.success(res.errMsg);
        }
    };
    const handleCancel = () => {
        props.getFeeClose()
    };
    //日期
    const [date,setData] = useState([])
    const PickerChange = (
        value: DatePickerProps['value'] | RangePickerProps['value'],
        dateString: any,
    ) => {
        setData(dateString)
    };
    //楼栋id
    const [options,setOptions]: any =useState([]);
    //楼栋列表
    const getBuildinglist = async ()=>{
        const res:any = await getBuildingList({}).catch()
        if(res&&res.errCode===10000){
            setOptions(res.data.list)
        }
    }
    const [buildingId,setbuildingId] = useState(0)
    const obtainHouse = (val:any)=>{
        if(val){
            setbuildingId(val[val.length - 1])
        }
    }
    const houseIf = ()=>{
        setHouseShow(true)
    }
    //房间号id
    const [houseAddId,setHouseAddId]:any = useState([])
    const gethouseidAdd = (val:any)=>{
        setHouseAddId(val)
    }
    //修改
    const listEdit = useRef<any>()
    //表格
    const onBuilding = (val:any)=>{
        return ()=>{
            setHouseAddId(houseAddId.filter((item:any)=>item.id!==val))
        }
    }
    const columns:ColumnsType<any> = [
        {
            title: '房间号',
            dataIndex: 'id',
        },
        {
            title: '房间名',
            dataIndex: 'building',
        },
        {
            title: '操作',
            render: (_, record) => (
                <Space size="middle">
                    <Button type="primary" danger onClick={onBuilding(record.id)}>删除</Button>
                </Space>
            ),
        },
    ];
    useEffect(()=>{
        listEdit.current.setFieldsValue({...props.listData,begindate:null})
    },[])
    useEffect(()=>{
        getType()
        getBuildinglist()
    },[])
    return (
        <>
            <Modal
                title="新增缴费"
                className="feeAdd"
                open={props.addShow}
                width="40%"
                centered={true}
                onCancel={handleCancel}
            >
                <Form ref={listEdit} onFinish={onFinish} initialValues={{houseids:1}}>
                    <Form.Item name="type" label="费用类型" rules={[{ required: true, message: '请选择费用类型' }]}>
                        <Select placeholder="请选择">
                            {
                                feeType.map((item: any) => (
                                    <Option value={item.name} key={item.id}>{item.name}</Option>
                                ))
                            }
                        </Select>
                    </Form.Item>
                    <Form.Item name="price" label="金额" rules={[{ required: true, message: '请输入金额' }]}>
                        <Input type="number" />
                    </Form.Item>
                    <Form.Item name="begindate"  label="账期" rules={[{ required: true, message: '请选择账期'}]}>
                        <RangePicker
                            format="YYYY-MM-DD"
                            onChange={PickerChange}
                        />
                    </Form.Item>
                    <Form.Item name="buildingid"  label="小区"  rules={[{ required: true, message: '请选择小区'}]}>
                        <Cascader
                            style={{width:'300px'}}
                            changeOnSelect
                            fieldNames={{ label: 'name', value: 'id', children: 'children' }}
                            options={options}
                            allowClear={false}
                            onChange={obtainHouse}
                            expandTrigger="hover"
                            placeholder="请选择"
                        />
                    </Form.Item>
                    <Form.Item name="houseids"  label="缴费房间" rules={[{ required: true, message: '请选择房间号'}]}>
                        <Radio.Group  onChange={onChange}>
                            <Radio value={1}>全部</Radio>
                            <Radio value={2} disabled={buildingId?false:true} onClick={houseIf}>部分房间</Radio>
                        </Radio.Group>
                    </Form.Item>
                    {
                        houseAddId.length>0&&
                        <Table bordered rowKey={record => record.id} pagination={false} columns={columns} dataSource={houseAddId} />
                    }

                    <Form.Item wrapperCol={{ offset: 7 }} style={{marginTop:'20px'}}>
                        <Button type="primary" htmlType="submit">
                            确定
                        </Button>
                        <Button onClick={handleCancel} style={{marginLeft:'10px'}} >
                            取消
                        </Button>
                    </Form.Item>
                </Form>
            </Modal>
            {
                houseShow&&
                <FeeHouse
                    houseShow={houseShow}
                    buildingId={buildingId}
                    getHouseShow={getHouseShow}
                    gethouseidAdd={gethouseidAdd}
                ></FeeHouse>
            }
        </>
    );
}

export default FeeAdd;
